@charset 'utf-8';
@import 'common';
$fontFamily: MicrosoftYaHei;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: $fontFamily;
    flex-shrink: 0;
}

html,
body {
    @include fullHeight;
    #root {
        @include fullHeight;
        >div {
            @include fullHeight;
        }
    }
}

.test {
    display: flex;
    
}
.circle {
    animation: opacity 1s;
}
#target {
    position: relative;
   
    > div {
        position: absolute;
        background-color: #757171;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            transition: all 0.6s;  
        }
        &:hover {
            img {
                transform: scale(1.1);
                animation-name: magnify;
                animation-duration: 0.6s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
                animation-timing-function: ease-in-out;   
            }
            div {
                display: block;
                text-shadow: 0 1px #000, 1px 0 #000, -1px 0 #000, 0 -1px #000;
            }
        }
    }
}
@keyframes opacity
{
    0% {
        transform: scale(0);
        opacity: 0;  
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        
       opacity: 1;
    }
}
@keyframes magnify
{
    0% {
        -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
        border-color: rgba(160, 179, 214, 0.5);         
    }
    100% {
        -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 1.0), 0 0 12px rgba(0, 140, 255, 1.0);
        border-color: rgba(160, 179, 214, 1.0); 
    }
}
 
@-webkit-keyframes magnify /* Safari 与 Chrome */
{
    0% {
        -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
        border-color: rgba(160, 179, 214, 0.5);         
    }
    100% {
        -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 1.0), 0 0 12px rgba(0, 140, 255, 1.0);
        border-color: rgba(160, 179, 214, 1.0); 
    }
}

.ppfix {
    margin: 0;
    vertical-align: top;
    display: inline-block;
    font-family: "Pontano Sans";
    font-size: 13px;
    color: #343434;
    min-width: 150px;
    height: 12px;
    background: #fbfbfb;
    border: 1px solid #cccdcf;
    padding: 3px 10px;
    box-shadow: inset 0 2px 3px #e8e8e8;
    box-sizing: content-box;
}
.post {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
  } 

.alt {
    position: absolute;
    color: white;
    width: 65px;
    text-align: center;
}
.hiden {
    display: none;
}